<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useScrollViewHelper } from '@/hooks/useScrollVIewHelper';
import { useDictStore } from '@/store/dictStore';

const props = defineProps<{
  modelValue: string | number
}>();

const emit = defineEmits<{
  'update:modelValue': [e: string | number]
  'change': [e: string | number]
}>();

const {
  $scrollContainer,
  $scrollCard,

  isOverFlow,

  onScroll,
  scrollToIndex,
  handleScroll,
  percentage,
  scrollLeft,
  scrollAnimation,
  canLeftScroll,
  canRightScroll
} = useScrollViewHelper();

const { getDictCodeList } = useDictStore();

const categoryList = computed(() => {
  return [{
    label: '全部',
    value: ''
  }, ...(getDictCodeList(DictKeyEnum.TERMINAL_PROPAGANDA_CLASS) || [])];
});

const selectCategory = ref<string | number>('');

watch(() => props.modelValue, val => {
  selectCategory.value = val;
});

function handleSelectCategory(item: DictItem) {
  selectCategory.value = item.value as string;
  const index = categoryList.value.indexOf(item);
  scrollToIndex(index);
  emit('update:modelValue', selectCategory.value);
  emit('change', selectCategory.value);
}
</script>

<template>
  <view class="category-block">
    <scroll-view
      class="category-card__group" :class="[$scrollContainer]" scroll-x :scroll-left="scrollLeft"
      :scroll-with-animation="scrollAnimation" :show-scrollbar="false" @scroll="onScroll"
    >
      <view
        v-for="(item, index) in categoryList" :key="index" class="category-card"
        :class="[$scrollCard, { active: item.value === selectCategory }]" @click="handleSelectCategory(item)"
      >
        <!-- 全部时展示 -->
        <i v-if="item.label === '全部'" class="iconfont icon-a-rongqi9" />
        {{ item.label }}
      </view>
    </scroll-view>
    <view v-if="isOverFlow" class="category-card__control mt-26 flex items-center px-90">
      <view class="arrow" :class="{ disabled: !canLeftScroll }" @click="handleScroll('left')">
        <i class="iconfont icon-a-duobianxing1" />
      </view>
      <view class="bar mx-20 flex-1">
        <wd-progress :percentage="percentage" hide-text :duration="0" />
      </view>
      <view class="arrow rotate-180" :class="{ disabled: !canRightScroll }" @click="handleScroll('right')">
        <i class="iconfont icon-a-duobianxing1" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.category-block {
  background: #d9e9ff;
  padding-top: 37px;
  padding-left: 47px;
  padding-bottom: 32px;

  .category-card__group {
    white-space: nowrap;
    overflow: auto;

    :deep(.uni-scroll-view)::-webkit-scrollbar {
      display: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }

    .category-card {
      background: #ffffff;
      color: #3d3d3d;
      padding: 12px 32px;
      border-radius: 100px;
      display: inline-block;
      font-size: 32px;
      margin-right: 20px;

      .iconfont {
        font-size: 36px;
      }

      &.active {
        background-color: var(--primary);
        color: #fff;

        .date-card__day,
        .date-card__date,
        .date-card__month {
          color: #fff;
        }
      }
    }
  }

  .category-card__control {
    .bar {
      --wot-progress-height: 20px;
      --wot-progress-bg: #c7d7f1;
      --wot-progress-color: var(--primary);
    }

    .arrow {
      &.disabled {
        .iconfont {
          color: #b1bed5;
        }
      }

      .iconfont {
        font-size: 42px;
        color: var(--primary);
      }
    }
  }
}
</style>
